<template>
    <div class="index">
<!--         <Header :transparency="transparency"></Header> -->
        <div id="main">
            <div class="banner">
                 <div class="swiper-container bannerContainer">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for ="(item,index) in silder">
                            <img v-bind:src="item.media">
                 <!--            <img :data-src="item.media" class="swiper-lazy"> -->
<!--                             <div class="swiper-lazy-preloader"></div> -->
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>               
            </div>
            <div class="indexContent">
                <div class="index_story">
                    <indexSwiper></indexSwiper> 
                </div>
                <div class="index_video">
                    <indexVideo></indexVideo>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/header'
import Footer from '@/components/footer'
import indexSwiper from '@/components/indexSwiper'
import indexVideo from '@/components/indexVideo'
import Loading from '@/components/loading'
export default {
  name: "index",
  components:{
     Header,
     Footer,
     indexSwiper:indexSwiper,
     indexVideo:indexVideo,
     Loading
  },
  data () {
    return {
        name:'我要测试首页',
        transparency:"rgba(255,255,255,0)",
        silder:[],
        url:'/api/medias?location=10'
    }
  },
  watch: {
    silder: function() {
        this.$nextTick(function(){
            var swiper = new Swiper('.bannerContainer', {
              lazy: {
                loadPrevNext: true, 
                loadPrevNextAmount: 1,
                loadOnTransitionStart: true,

              },
              keyboard : true,
              virtualTranslate : true,
              on:{
                setTranslate: function(){
                  this.$wrapperEl.transition('')
                  TweenMax.to(this.$wrapperEl, 1.5, {x:this.translate, ease:Power4.easeOut})
                  
                }
              },
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                }
            });            
        })
    }
  },
  methods: {
      getSlider () {
        this.$loading(this.$t("contact.loading"));
        let self = this;
        axios.get(self.url)
            .then(function (response) {
               self.silder = response.data.data;
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            })           
            self.closeLoading();
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
     this.getSlider();
  }  
};
</script>
<style scoped>
 @import "../assets/css/index.css";
 .swiper-button-prev,.swiper-button-next{width:0px;height:0px;}

</style>